<template>
	<view class="box">
		<div class="maskBox" v-show="isClickShow">
			<image class="imgs" :src="imgUrl" mode=""></image>
		</div>
		<swiper class="swiper" :interval="interval" :current="current" :duration="duration" @change="slideBig"
			@animationfinish="animationfinish">
			<swiper-item :key="index" v-for="(item,index) in imgList">
				<view class="swiper-item uni-bg-red">
					<view class="bg">
						<image style="width: 100%; height: 750rpx;" :src="item.url" mode=""></image>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<div class="tab">
			<Utabs1 bg-color="none" item-width="102" height="102" :active-item-style="active" :show-bar="false"
				:list="imgList" :is-scroll="true" :current="current" @change="change">
			</Utabs1>
		</div>
		<view class="buttons">
			<view v-if="flag" @click.stop="clickDownload" class="button">
				<image mode="widthFix" style="width: 90rpx; height: 90rpx;"
					src="https://tb.wuyouzhuan888.com/applet-icon/a2.png"></image>
				<view class="text">
					下载
				</view>
			</view>
			<view v-else class="button">
				<image mode="widthFix" style="width: 90rpx; height: 90rpx;"
					src="https://tb.wuyouzhuan888.com/applet-icon/61b331f4b2f2d80056050684a798ab19.png"></image>
				<view class="ended">已下载</view>
			</view>
			<view class="wrap share">
				<button class="btn" open-type="share">
					<image class="img" src="https://tb.wuyouzhuan888.com/applet-icon/a3.png">
					</image>
				</button>
				<view class="text">
					分享
				</view>
			</view>
		</view>
		<u-popup border-radius="20" v-model="adVipMask" mode="center">
			<image @click="adVipMask=false" class="close" src="https://tb.wuyouzhuan888.com/applet-icon/close.png"
				mode=""></image>
			<view class="qq">
				<adVipMask :usableDownload="usableDownload" :isIPhone="isIPhone" @clickWatchAd="clickWatchAd"
					@clickVip="clickVip" @closeDk="closeDk" />
			</view>
		</u-popup>
		<u-popup border-radius="20" v-model="noNumberMask" mode="center">
			<image @click="noNumberMask=false" class="close" src="https://tb.wuyouzhuan888.com/applet-icon/close.png"
				mode=""></image>
			<view class="qq">
				<noNumberMask :type="noNumberMaskType" @clickVip="clickVip" :content="maskContent" @closeDk="closeDk" />
			</view>
		</u-popup>
		<u-popup border-radius="20" v-model="saveMask" mode="center">
			<image @click="saveMask=false" class="close" src="https://tb.wuyouzhuan888.com/applet-icon/close.png"
				mode=""></image>
			<view class="qq">
				<saveMask @closeDk="closeDk" />
			</view>
		</u-popup>
		<u-popup border-radius="20" v-model="sampleMask" mode="center">
			<image @click="sampleMask=false" class="close" src="https://tb.wuyouzhuan888.com/applet-icon/close.png"
				mode=""></image>
			<view class="qq">
				<sampleMask @clickSample="clickSample" />
			</view>
		</u-popup>
	</view>
</template>

<script>
	import Utabs1 from './components/u-tabs.vue'
	import adVipMask from '@/components/mask/adVip.vue'
	import sampleMask from '@//components/mask/sample.vue'
	import saveMask from '@/components/mask/save.vue'
	import noNumberMask from '@/components/mask/noNumber.vue'
	export default {
		components: {
			Utabs1,
			adVipMask,
			sampleMask,
			saveMask,
			noNumberMask,
		},
		data() {
			return {
				interval: 0,
				duration: 0,
				noNumberMaskType: 1, //1 1个按钮 2 两个按钮
				noNumberMask: false,
				sampleMask: false,
				saveMask: false,
				adVipMask: false,
				maskContent: '',
				flag: true,
				active: {
					border: '2px solid #ffffff',
					borderRadius: '20rpx',
					width: '118rpx',
					height: '118rpx'
				},
				// 选中的图片
				current: 0,
				// 点击图片显示
				isClickShow: false,
				// 任务ID
				taskId: 0,
				// 模版ID
				movId: 0,
				// 创作者ID
				creatorId: 0,
				// 账号ID
				accountId: 0,
				callbackId: 0,
				collectionId: 0,
				urlId: 0,
				// 资源ID
				resourcesId: 0,
				// 图集ID
				atlasId: 0,
				// 图片信息
				imgList: [],
				// 图片链接
				imgUrl: '',
				// 是否会员
				isVip: false,
				// 是否能下载
				canDownload: false,
				// 每日能下载的总数
				canDownloadTotal: 0,
				// 剩余可下载的次数
				usableDownload: 0,
				// 激励广告ID
				incentiveAdId: '',
				// 广告加载状态 1成功 0失败
				adStatus: 1,
				// 苹果手机
				isIPhone: false,
				// 图集资源json
				jsonImgList: '',
				shareTitle: '',
				shareId: ''
			};
		},
		onLoad(options) {
			uni.showLoading({
				title: "加载中...",
			})
			// 判断手机平台是否为苹果
			this.isIPhone = (uni.getSystemInfoSync().osName == 'ios')
			// 任务ID
			this.taskId = options.taskId ?? 0;
			// 模版ID
			this.movId = options.movId ?? 0;
			// 创作者ID
			this.creatorId = options.creatorId ?? 0;
			// 账号ID
			this.accountId = options.accountId ?? 0;
			this.collectionId = options.collectionId ?? 0;
			this.callbackId = options.callbackId ?? 0;
			this.urlId = options.urlId ?? 0;
			// 图集ID
			this.atlasId = options.atlasId;
			// 选中资源信息
			this.current = options.selectIndex;
			// json资源列表 用于小程序跳转
			this.jsonImgList = options.imgList
			// 资源列表
			this.imgList = JSON.parse(decodeURIComponent(options.imgList))
			// 获取资源ID
			this.resourcesId = this.imgList[this.current].resourcesId
			// 图片链接
			this.imgUrl = this.imgList[this.current].url
			this.getAdInfo();
		},
		mounted() {
			uni.hideLoading()
		},
		// 加载分享信息
		async onShareAppMessage() {
			if (this.shareTitle == '') {
				// #ifdef MP-TOUTIAO
				// 获取分享信息
				await this.getDyShareInfo();
				// #endif
			}
			return {
				// 标题
				title: this.shareTitle,
				// url
				path: "/pages/sys/cate_bags/detailcolunm?imgList=" + encodeURIComponent(JSON.stringify(this.imgList)) +
					'&atlasId=' + this.atlasId +
					'&selectIndex=' + this.current,
				templateId: this.shareId,
			};
		},
		methods: {
			closeDk() {
				this.adVipMask = false
				this.noNumberMask = false
				this.saveMask = false
			},
			// 滑动大图
			slideBig(e) {
				this.current = e.detail.current;
				// 获取资源ID
				this.resourcesId = this.imgList[e.detail.current].resourcesId
				// 图片链接
				this.imgUrl = this.imgList[e.detail.current].url
				this.flag = true;
			},
			// 滑块加载完效果
			animationfinish() {
				// 蒙版图片不展示
				this.isClickShow = false;
			},
			// 滑动小图
			change(index) {
				this.current = index;
				// 图片链接
				this.imgUrl = this.imgList[index].url
				// 图片展示
				this.isClickShow = true;
				// 获取资源ID
				this.resourcesId = this.imgList[index].resourcesId

				this.flag = true;
			},
			// 点击下载
			async clickDownload() {
				// 获取用户下载信息
				await this.getUserDownloadInfo()
				// 用户是会员
				if (this.isVip) {
					// 今日下载次数没用完
					if (this.usableDownload) {
						// 执行下载
						this.saveImage();
					} else {
						// 会员下载额度用完
						this.maskContent = '当前会员享受每日额度为' + this.canDownloadTotal + '张，今日已经全部消耗完，请明日再来~';
						this.noNumberMask = true
						this.noNumberMaskType = 1
						return
					}
				} else {
					// 今日下载次数没用完
					if (this.usableDownload) {
						// 打开下载弹窗
						this.adVipMask = true;
					} else {
						// 如果ios 打开ios跳转弹窗
						if (this.isIPhone) {
							this.maskContent = '已超今日限额，请明日再来！';
							this.noNumberMaskType = 1;
						} else {
							// 如果安卓 打开安卓弹窗
							this.maskContent = '已超今日限额，请明日再来；或开通会员畅享无广告下载！！！';
							this.noNumberMaskType = 2;
						}
						this.noNumberMask = true
					}
				}
			},
			// 点击会员
			clickVip() {
				// 关闭弹窗
				this.adVipMask = false
				this.noNumberMask = false
				uni.navigateTo({
					url: "/pages/sys/user_bags/buy?taskId=" + this.taskId +
						"&movId=" + this.movId +
						"&creatorId=" + this.creatorId +
						"&accountId=" + this.accountId +
						"&atlasId=" + this.atlasId +
						"&callbackId=" + this.callbackId +
						"&collectionId=" + this.collectionId +
						"&urlId=" + this.urlId +
						"&resourcesId=" + this.resourcesId,
					events: {
						isVip: data => {
							if (!data) {
								// 打开体验会员弹窗
								this.sampleMask = true;
							}

						}
					}
				})
			},
			// 点击体验卡
			clickSample() {
				// 打开体验会员弹窗
				uni.navigateTo({
					url: "/pages/sys/user_bags/buy?taskId=" + this.taskId +
						"&movId=" + this.movId +
						"&creatorId=" + this.creatorId +
						"&accountId=" + this.accountId +
						"&atlasId=" + this.atlasId +
						"&callbackId=" + this.callbackId +
						"&resourcesId=" + this.resourcesId +
						"&collectionId=" + this.collectionId +
						"&urlId=" + this.urlId +
						"&sample=" + true,
					events: {
						isVip: data => {
							if (!data) {
								// 打开体验会员弹窗
								this.sampleMask = true;
							} else {
								this.sampleMask = false
							}

						}
					}
				})
			},
			// 点击看广告
			clickWatchAd() {
				// 关闭弹窗
				this.adVipMask = false
				// 广告加载成功
				if (this.adStatus == 1) {
					tt.showLoading({
						title: '广告加载中...'
					})
					this.ad.show()
				} else {
					// 广告加载失败 直接下载
					this.saveImage();
				}

			},

			// 获取用户下载信息
			getUserDownloadInfo() {
				return new Promise((resolve) => {
					this.$u.api.download.getInfo().then(res => {
						if (res.code != 200) {
							uni.showModal({
								title: '获取用户信息失败',
								content: '请刷新后重试或重启小程序',
								showCancel: false,
								confirmText: '知道了'
							})
							// 是否会员
							this.isVip = false;
							// 是否能下载
							this.canDownload = false;
							// 每日能下载的总数
							this.canDownloadTotal = 0;
							// 剩余可下载的次数
							this.usableDownload = 0;
						} else {
							// 是否会员
							this.isVip = res.data.isVip;
							// 是否能下载
							this.canDownload = res.data.canDownload;
							// 每日能下载的总数
							this.canDownloadTotal = res.data.canDownloadTotal;
							// 剩余可下载的次数
							this.usableDownload = res.data.usableDownload;
						}
						resolve();
					})
				})
			},

			// 统计用户下载信息
			downloadStatistics() {
				return new Promise((resolve) => {
					this.$u.api.download.statistics({
						platform: 1,
						taskId: this.taskId,
						movId: this.movId,
						creatorId: this.creatorId,
						accountId: this.accountId,
						callbackId: this.callbackId,
						atlasId: this.atlasId,
						collectionId: this.collectionId,
						urlId: this.urlId,
						resourcesId: this.resourcesId,
						adStatus: this.adStatus,
						vipDownload: this.isVip ? 1 : 0
					}).then(res => {
						resolve();
					})
				})
			},
			// 获取抖音广告信息
			getDyAdInfo() {
				return new Promise((resolve) => {
					this.$u.api.dy.getAdInfo().then(res => {
						if (res.code != 200) {
							// 激励广告ID
							this.incentiveAdId = '';
						} else {
							// 激励广告ID
							this.incentiveAdId = res.data.incentiveAdId;
						}
						resolve();
					})
				})
			},

			// 获取广告信息
			async getAdInfo() {
				// 激励广告为空
				if (this.incentiveAdId == '') {
					// #ifdef MP-TOUTIAO
					// 获取抖音广告信息
					await this.getDyAdInfo();
					// #endif
				}
				// 加载广告组件
				this.ad = tt.createRewardedVideoAd({
					adUnitId: this.incentiveAdId
				});
				//防止奖励重复发放
				try {
					if (this.ad.closeHandler) {
						this.ad.offClose(this.ad.closeHandler);
					}
				} catch (e) {}
				// 监听错误
				this.ad.onError(err => {
					// 广告加载失败
					this.adStatus = 0;
				});
				// 关闭广告后执行
				this.ad.closeHandler = (res) => {
					tt.hideLoading();
					if (res.isEnded) {
						this.saveImage();
					}
				}
				// 监听视频播放完成
				this.ad.onClose(this.ad.closeHandler);
				// 预加载资源
				this.ad.load();
			},
			// 保存图片
			saveImage() {
				this.downLoadImg()
			},
			// 下载图片
			async downLoadImg() {
				const that = this;
				uni.showLoading({
					title: '下载中...'
				});
				setTimeout(() => {
					uni.hideLoading()
				}, 2000)
				uni.downloadFile({
					url: that.imgUrl,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									that.downloadStatistics();
									that.flag = false
									that.saveMask = true;
								},
								fail: function() {
									uni.getSetting({
										success: (result) => {
											if (!result.authSetting[
													'scope.album']) {
												that.isAuth()
											}
										}
									});
									uni.showToast({
										title: "保存失败，请稍后重试",
										icon: "none"
									});
								}
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: "失败啦",
							icon: "none"
						});
					}
				})
			},
			// 引导用户开启权限
			isAuth() {
				uni.showModal({
					title: "温馨提示",
					content: '保存图片需要相关权限，请授权相册权限',
					confirmText: '前往授权',
					showCancel: false,
					success: (res) => {
						if (res.confirm) {
							uni.openSetting({
								success: (result) => {
									if (result.authSetting[
											'scope.album']) {
										this.downLoadImg()
									} else {
										this.$u.toast('授权失败')
									}
								},
							});
						}
					}
				});
			},
			// 获取抖音分享信息
			getDyShareInfo() {
				return new Promise((resolve) => {
					this.$u.api.dy.getShareInfo().then(res => {
						this.shareId = res.data.shareId;
						this.shareTitle = res.data.shareTitle;
						resolve();
					})
				})
			},
		},
	};
</script>

<style lang="scss">
	.maskBox {
		width: 100%;
		height: 100vh;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		z-index: 9;
		display: flex;
		align-items: center;
		justify-content: center;

		.imgs {
			width: 100%;
			height: 750rpx;
		}
	}

	.swiper {
		width: 100%;
		height: 100vh;

		.swiper-item {
			width: 100%;
			height: 100vh;
		}

		.desc {
			padding: 0 20upx;
		}
	}

	.box {
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.bg {
			width: 100%;
			height: 100vh;
			background: #000;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.buttons {
			display: flex;
			flex-direction: column;
			position: fixed;
			right: 4vw;
			bottom: 30vh;
			color: white;
			text-align: center;
			justify-content: center;
			z-index: 10;

			.wrap {
				margin-bottom: 50upx;
			}

			.add {
				font-size: 26upx;
				margin-top: 10upx;
			}

			.share {
				margin: 0 auto;
				position: relative;
				height: 90upx;
				width: 90upx;
				font-size: 25upx;

				button {
					position: absolute;
					background: none;
					height: 90upx;
					width: 90upx;
					left: 0;
					right: 0;
					bottom: 0;
					top: 0;
					padding: 0;
					margin: 0;

					&::after {
						border: none !important;
					}

					.img {
						height: 100%;
						width: 100%;
					}
				}

				.text {
					position: absolute;
					width: 100%;
					top: 92upx;
					left: 50%;
					transform: translate(-50%);
				}
			}

			.button {
				text-align: center;
				font-size: 25upx;
				margin: 40upx 0;

				.icon {
					margin: 10upx 20upx;
					width: 60upx;
					display: block;
				}
			}
		}

		.tab {
			z-index: 10;
			position: fixed;
			left: 32rpx;
			right: 32rpx;
			bottom: 32rpx;

			/deep/ .u-tab-item {
				padding: 0 !important;
				margin-right: 16rpx;
				border-radius: 20rpx;
			}

			.img1 {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}
	}

	// 隐藏滚动条
	::-webkit-scrollbar {
		height: 0;
		width: 0;
		color: transparent;
	}
</style>